<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>听力极限测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            background-color: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        h1, h2 {
            color: #333;
            text-align: center;
        }
        .section {
            margin: 20px 0;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        .audio-controls {
            text-align: center;
            margin: 20px 0;
        }
        button {
            background-color: #4CAF50;
            border: none;
            color: white;
            padding: 10px 20px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 10px 5px;
            cursor: pointer;
            border-radius: 5px;
        }
        button:hover {
            background-color: #45a049;
        }
        button:disabled {
            background-color: #cccccc;
            cursor: not-allowed;
        }
        #resultButton {
            background-color: #2196F3;
        }
        #resultButton:hover {
            background-color: #0b7dda;
        }
        .hidden {
            display: none;
        }
        .test-progress {
            text-align: center;
            margin: 20px 0;
            font-weight: bold;
        }
        .results-table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
        }
        .results-table th, .results-table td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: center;
        }
        .results-table th {
            background-color: #f2f2f2;
        }
        .selected {
            background-color: #45a049;
            transform: scale(1.12);
            border: 2px solid #2d7a2e; /* 添加深绿色边框 */
            box-sizing: border-box; /* 确保边框不影响元素尺寸 */
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>听力极限测试</h1>

        <div id="introduction" class="section">
            <h2>测试说明</h2>
            <p>本测试旨在帮助您了解自己的听力极限。测试将播放一系列混音音频，每个音频包含两首歌曲的混合：</p>
            <ul>
                <li>一首是王菲的《红豆》</li>
                <li>另一首是林俊杰的《不死之身》，但经过不同程度的衰减</li>
            </ul>
            <p>您的任务是仔细聆听，判断是否能听到林俊杰的《不死之身》这首歌。</p>
            <p>在正式测试前，您可以先预听这两首原曲，熟悉它们的旋律。</p>

            <div class="audio-controls">
                <h3>原曲预听</h3>
                <div>
                    <h4>王菲 - 《红豆》</h4>
                    <audio id="origin1" controls>
                        <source src="resources/Origin_1.ogg" type="audio/ogg">
                        您的浏览器不支持音频元素。
                    </audio>
                </div>
                <div>
                    <h4>林俊杰 - 《不死之身》</h4>
                    <audio id="origin2" controls>
                        <source src="resources/Origin_2.ogg" type="audio/ogg">
                        您的浏览器不支持音频元素。
                    </audio>
                </div>
            </div>

            <div class="audio-controls">
                <button id="startTest">开始测试</button>
            </div>
        </div>

        <div id="testSection" class="section hidden">
            <h2>听力测试</h2>
            <div class="test-progress">
                <p>测试进度: <span id="current">0</span> / <span id="total">0</span></p>
            </div>

            <div class="audio-controls">
                <audio id="testAudio" controls>
                    <source src="" type="audio/ogg">
                    您的浏览器不支持音频元素。
                </audio>
            </div>

            <div class="audio-controls">
                <button id="heardIt">能听见另一首歌</button>
                <button id="notHeardIt">不能听见另一首歌</button>
                <button id="nextTest" disabled>继续</button>
            </div>
        </div>

        <div id="resultsSection" class="section hidden">
            <h2>测试结果</h2>
            <p>您已完成所有测试项目。根据您的回答，以下是详细结果：</p>

            <table class="results-table">
                <thead>
                    <tr>
                        <th>测试音频</th>
                        <th>衰减分贝数</th>
                        <th>您的选择</th>
                    </tr>
                </thead>
                <tbody id="resultsTableBody">
                </tbody>
            </table>

            <div class="audio-controls">
                <button id="restartTest">重新测试</button>
            </div>
        </div>
    </div>

    <script>
        // 测试数据
        const testData = [
            { file: "resources/Mix_a.ogg", dB: "-60dB" },
            { file: "resources/Mix_b.ogg", dB: "-50dB" },
            { file: "resources/Mix_c.ogg", dB: "-40dB" },
            { file: "resources/Mix_d.ogg", dB: "-30dB" },
            { file: "resources/Mix_e.ogg", dB: "-25dB" },
            { file: "resources/Mix_f.ogg", dB: "-20dB" },
            { file: "resources/Mix_g.ogg", dB: "-15dB" },
            { file: "resources/Mix_h.ogg", dB: "-10dB" },
            { file: "resources/Mix_i.ogg", dB: "-5dB" }
        ];

        // DOM元素
        const introduction = document.getElementById('introduction');
        const testSection = document.getElementById('testSection');
        const resultsSection = document.getElementById('resultsSection');
        const startTestButton = document.getElementById('startTest');
        const testAudio = document.getElementById('testAudio');
        const heardItButton = document.getElementById('heardIt');
        const notHeardItButton = document.getElementById('notHeardIt');
        const nextTestButton = document.getElementById('nextTest');
        const currentSpan = document.getElementById('current');
        const totalSpan = document.getElementById('total');
        const resultsTableBody = document.getElementById('resultsTableBody');
        const restartTestButton = document.getElementById('restartTest');

        // 测试状态
        let testOrder = [];
        let currentTestIndex = 0;
        let userAnswers = [];
        let currentAudio = null;

        // 初始化
        function init() {
            totalSpan.textContent = testData.length;
            bindEvents();
        }

        // 绑定事件
        function bindEvents() {
            startTestButton.addEventListener('click', startTest);
            heardItButton.addEventListener('click', () => selectAnswer(true));
            notHeardItButton.addEventListener('click', () => selectAnswer(false));
            nextTestButton.addEventListener('click', nextTest);
            restartTestButton.addEventListener('click', restartTest);

            testAudio.addEventListener('loadeddata', () => {
                // 按钮在音频加载后启用
            });

            testAudio.addEventListener('error', () => {
                alert('音频加载失败，请检查文件路径或浏览器兼容性。');
            });
        }

        // 选择答案
        function selectAnswer(heard) {
            // 移除之前的选择样式
            heardItButton.classList.remove('selected');
            notHeardItButton.classList.remove('selected');

            // 记录用户选择
            userAnswers[currentTestIndex] = heard;

            // 添加选中样式
            if (heard) {
                heardItButton.classList.add('selected');
            } else {
                notHeardItButton.classList.add('selected');
            }

            // 启用继续按钮
            nextTestButton.disabled = false;
        }

        // 开始测试
        function startTest() {
            closeAllAudio();

            introduction.classList.add('hidden');
            testSection.classList.remove('hidden');

            // 创建随机测试顺序
            testOrder = [...Array(testData.length).keys()];
            shuffleArray(testOrder);

            currentTestIndex = 0;
            userAnswers = [];
            playCurrentTest();
        }

        // 播放当前测试音频
        function playCurrentTest() {
            const testItem = testData[testOrder[currentTestIndex]];
            currentSpan.textContent = currentTestIndex + 1;

            // 更新音频源
            testAudio.innerHTML = `<source src="${testItem.file}" type="audio/ogg">您的浏览器不支持音频元素。`;
            testAudio.load();

            // 重置按钮状态
            heardItButton.classList.remove('selected');
            notHeardItButton.classList.remove('selected');
            nextTestButton.disabled = true;

            // 如果用户之前已做过选择，则恢复选择状态
            if (userAnswers[currentTestIndex] !== undefined) {
                if (userAnswers[currentTestIndex]) {
                    heardItButton.classList.add('selected');
                } else {
                    notHeardItButton.classList.add('selected');
                }
                nextTestButton.disabled = false;
            }
        }

        // 下一个测试
        function nextTest() {
            closeAllAudio();
            currentTestIndex++;

            if (currentTestIndex < testData.length) {
                playCurrentTest();
            } else {
                showResults();
            }
        }

        // 显示结果
        function showResults() {
            testSection.classList.add('hidden');
            resultsSection.classList.remove('hidden');

            // 清空结果表格
            resultsTableBody.innerHTML = '';

            // 填充结果表格
            for (let i = 0; i < testData.length; i++) {
                const testIndex = testOrder[i];
                const testItem = testData[testIndex];
                const userAnswer = userAnswers[i];

                const row = document.createElement('tr');

                // 添加行内容
                row.innerHTML = `
                    <td>音频 ${String.fromCharCode(97 + testIndex).toUpperCase()}</td>
                    <td>${testItem.dB}</td>
                    <td>${userAnswer ? '能听见' : '不能听见'}</td>
                `;

                resultsTableBody.appendChild(row);
            }
        }

        // 重新开始测试
        function restartTest() {
            resultsSection.classList.add('hidden');
            introduction.classList.remove('hidden');
        }

        // Fisher-Yates 洗牌算法
        function shuffleArray(array) {
            for (let i = array.length - 1; i > 0; i--) {
                const j = Math.floor(Math.random() * (i + 1));
                [array[i], array[j]] = [array[j], array[i]];
            }
        }

        // 关闭所有当前页面正在播放的音频（暂停or关闭）
        function closeAllAudio() {
            const audios = document.getElementsByTagName('audio');
            for (let i = 0; i < audios.length; i++) {
                let audio = audios[i];
                if (!audio.paused) {
                    audio.pause();
                }
            }
        }

        // 页面加载完成后初始化
        window.addEventListener('DOMContentLoaded', init);
    </script>
</body>
</html>